<template>
  <n-layout-header class="header" bordered>
    <div class="logo"  @dblclick="clickLogoLogin">
      <img src="../../../../assets/images/logo.png" alt="" />
    </div>
    <n-space class="breadcrumb-css">
      <n-button quaternary size="large" type="warning" @click="goHome">
        <template #icon>
          <n-icon>
            <HomeSharp />
          </n-icon>
        </template>
        首页
      </n-button>
      <n-dropdown
        animated
        placement="bottom-start"
        trigger="hover"
        size="huge"
        :options="typelist"
        @select="handleSelect"
        class="dropdown-css"
      >
        <n-button quaternary size="large" type="warning" @click="goHome">
          <template #icon>
            <n-icon>
              <ChevronDownCircle />
            </n-icon>
          </template>
          分类
        </n-button>
      </n-dropdown>
    </n-space>
  </n-layout-header>
</template>

<script setup>
import { useMessage } from "naive-ui";
import { ref, onMounted } from "vue";
import qs from "qs";
import requestUtil from "../../../../utils/request";
import { HomeSharp, ChevronDownCircle } from "@vicons/ionicons5"; // 引入图标组件
import { useRouter } from 'vue-router'
import store from "../../../../store";

const router = useRouter()

// 点击logo跳转
const clickLogoLogin = () => {
  router.push("login")
};

const message = useMessage();
const typelist = ref([]);
//获取分类
const getTypeList = async () => {
  try {
    let result = await requestUtil.post(
      "articleType/select",
      qs.stringify({
        is_active: "1",
      })
    );
    const data = result.data;
    if (data.code === 200) {
      typelist.value = data.types.map((item) => ({
        label: item.type_name, // 正确返回对象
        key: item.id.toString(),
      }));
    } else {
      message.error("数据加载失败：" + data.info);
    }
  } catch (error) {
    message.error("请求失败：" + error.message);
  }
};
//使用Vuex提交mutation
const handleSelect = (key) => {
  store.commit('SET_SELECTED_TYPE_ID', String(key));
};
// 新增：首页点击处理（使用Vuex）
const goHome = () => {
  store.commit('SET_SELECTED_TYPE_ID', null); // 清空分类ID
};

// 页面加载时加载类型列表
onMounted(() => {
  getTypeList();
});
</script>

<style scoped >
.header {
  height: 80px;
  background: linear-gradient(to bottom, #f0e7d0, #f2e1b3);
  border-bottom: 1px solid #e2ba4b;
  display: flex;
  justify-content: flex-start; /* 改为左对齐 */
  gap: 20px; /* 可选：添加间距 */
  align-items: center;
  position: sticky;
  top: 0; /* 相对于 .text-css 固定在顶部 */
  z-index: 1000; /* 确保 header 在最上层 */
}
.logo {
  height: 79px;
  width: 220px;
  background: linear-gradient(to bottom, #f0e7d0, #f2e1b3);
}
.logo img {
  height: 100%;
  width: 100%;
}
.breadcrumb-css {
  text-align: center;
}

.dropdown-css {
  background-color: #f0bc39 !important;
}

</style>
